<template>
  <div class="box">
    <div class="box_title">
      <div class="search_item flex">
        <div class="search_item_lf">区/县</div>
        <div class="search_item_lc overflowEllipsis">{{ area }}</div>
        <div class="search_item_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>
      </div>
      <div class="search_item flex" @click="streetClick(1)">
        <div class="search_item_lf">街 道</div>
        <div class="search_item_lc overflowEllipsis">{{ Query.streetStr }}</div>
        <div class="search_item_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>
      </div>
      <div class="search_item flex" @click="streetClick(2)">
        <div class="search_item_lf">社 区</div>
        <div class="search_item_lc overflowEllipsis">{{ Query.communityStr }}</div>
        <div class="search_item_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>
      </div>
      <div class="search_item flex" @click="streetClick(3)">
        <div class="search_item_lf">网 格</div>
        <div class="search_item_lc overflowEllipsis">{{ Query.gridStr }}</div>
        <div class="search_item_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>
      </div>
      <div class="search_item flex">
        <div class="search_item_lf">统计类型</div>
        <div class="search_item_lc overflowEllipsis" @click="statistiClick">{{ statistiVal }}</div>
        <div class="search_item_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>
      </div>
      <div class="search_item flex">
        <div class="search_item_lf">人员类别</div>
        <div class="search_item_lc overflowEllipsis" @click="typeClick">{{ typeStr }}</div>
        <div class="search_item_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>
      </div>
      <div class="search_buxBox">
        <div class="search_button" @click="searchClick">查询</div>
      </div>
    </div>
    <div class="box_main_bd">
      <div class="box_main_bd_box">
        <div class="box_main_echarts">
          <div class="echarts_title">
            ───&nbsp;&nbsp;&nbsp;&nbsp;数据统计&nbsp;&nbsp;&nbsp;&nbsp;───
          </div>
          <div class="echarts_nav">
            <div class="echarts_nav_box flex">
              <div class="echarts_nav_box_item" @click="echartsClick(i)" :class="{'echarts_nav_box_itemSelect':isechartsnavboxitemSelect==i}"
                v-for="(e,i) in dataNavList" :key="i">
                {{e}}
              </div>
            </div>
          </div>
          <div class="echarts_main">
            <div v-show="isechartsnavboxitemSelect == 0" id="pieMainmap">
              <!-- <div></div> -->
            </div>
            <div v-show="isechartsnavboxitemSelect == 1" id="categoryMainmap">
              <!-- <div></div> -->
            </div>
            <div v-show="isechartsnavboxitemSelect == 2" id="zhexianMainmap">
              <!-- <div></div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="box_main_bd_box_list">
        <ul>
          <li class="box_main_bd_box_list_item" v-for="(e,i) in bottomLists" :key="i">
            <div class="box_main_bd_box_list_itemC" :style="{'background-color':e.color}"></div>
            <div class="box_main_bd_box_list_itemN">
              {{e.name}}
            </div>
            <div class="box_main_bd_box_list_itemV">({{e.value}})</div>
            <div class="box_main_bd_box_list_itemP">({{e.percentum}}%)</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 是否党员单选 -->
    <selectModel :pockerunit="istypeShow" :numLists='typeLists' :defIndex='typeIndex' @confirm="confirmtypeClick"
      @cancel="canceltypeClick"></selectModel>
    <!-- 统计类型单选 -->
    <selectModel :pockerunit="isstatisticaltypeShow" :numLists='statisticaltypeLists' :defIndex='statisticaltypeIndex'
      @confirm="confirmstatistiClick" @cancel="cancelstatistiClick"></selectModel>
  </div>
</template>
<script>
  let echarts = require("echarts");
  import taskApi from "../../requestApi/taskApi";
  import dateModel from "../../components/Module/dateModel";
  import selectModel from "../../components/Module/selectModel";
  import {
    Toast
  } from "mint-ui";
  export default {
    components: {
      dateModel,
      selectModel
    },
    data() {
      return {
        area: "宝塔区",
        Query: {
          street: "",
          streetStr: "- -",
          community: "",
          communityStr: "- -",
          grid: "",
          gridStr: "- -",
          type: 0,
          year: 2018
        },
        isechartsnavboxitemSelect: 1,
        statistiVal: "年龄统计",
        typeStr: "所有",
        dataNavList: ["饼状图", "柱状图", "折线图"],
        categoryColorLists: [],
        bottomLists: [],
        pieDataList: [],
        XLists: [],
        YLists: [],

        istypeShow: false,
        typeLists: [{
            name: "所有",
            id: 0
          },
          {
            name: "党员",
            id: 1
          },
          {
            name: "非党员",
            id: 2
          }
        ],
        typeIndex: 1,
        isstatisticaltypeShow: false,
        statisticaltypeLists: [{
            name: "年龄统计",
            id: "1"
          },
          {
            name: "职业统计",
            id: "2"
          },
          {
            name: "文化程度统计",
            id: "3"
          },
          {
            name: "民族统计",
            id: "4"
          },
          {
            name: "性别统计",
            id: "5"
          }
        ],
        statisticaltypeIndex: 1
      };
    },
    created: function () {},
    mounted() {
      let self = this;
      // let u = navigator.userAgent;
      // let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
      // if (isAndroid) {
      //   if (window.BenchJSInterface) {
      //     if (window.BenchJSInterface.setRightImage) {
      //       // 0 不设置右上角  1 选择年  2 选择组织机构
      //       // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
      //       // * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
      //       let obj = {
      //         clickType: 1,
      //       };
      //       window.BenchJSInterface.setRightImage(
      //         JSON.stringify(obj),
      //         `javascript:window.getAppRightdangyuanshujutongji(->path<-);`
      //       );
      //     }
      //   }
      // }
      if (window.BenchJSInterface) {
        if (window.BenchJSInterface.setRightImage) {
          // 0 不设置右上角  1 选择年  2 选择组织机构
          // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
          // * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
          let obj = {
            clickType: 1,
          };
          window.BenchJSInterface.setRightImage(
            JSON.stringify(obj),
            `javascript:window.getAppRightdangyuanshujutongji(->path<-);`
          );
        }
      }
      window.getAppRightdangyuanshujutongji = function (val) {
        self.Query.year = val
        if (self.statistiVal == "年龄统计") {
          self.listAgeFun();
        } else if (self.statistiVal == "职业统计") {
          self.listZyFun();
        } else if (self.statistiVal == "文化程度统计") {
          self.listWhFun();
        } else if (self.statistiVal == "民族统计") {
          self.listMzFun();
        } else if (self.statistiVal == "性别统计") {
          self.listXbFun();
        }
      };
      self.baseUserMessageDistributeFun();
      window.getAppgetUserToken = function (val) {
        self.baseUserInfoFun(val);
        self.listAgeFun();
      };
      // self.listAgeFun();
      this.titleFun({
        title: "数据统计"
      });
    },
    methods: {
      // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
      //  * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
      streetClick(index) {
        let self = this;
        let obj = {
          type: index,
          chooseType: index
        };
        self.baseUserchooseOrgFun(JSON.stringify(obj), "getStreetClick");
        window.getStreetClick = function (val) {
          let obj = self.basechooseOrgInfoFun(val);
          if (index == 1) {
            self.Query.street = obj.orgId;
            self.Query.streetStr = obj.orgName;
            self.Query.community = "";
            self.Query.communityStr = "- -";
            self.Query.grid = "";
            self.Query.gridStr = "- -";
          } else if (index == 2) {
            self.Query.community = obj.orgId;
            self.Query.communityStr = obj.orgName;
            self.Query.grid = "";
            self.Query.gridStr = "- -";
          } else if (index == 3) {
            self.Query.grid = obj.orgId;
            self.Query.gridStr = obj.orgName;
          }
        };
      },
      // 是否党员
      typeClick() {
        this.istypeShow = true;
      },
      confirmtypeClick(val, index) {
        this.typeStr = val.name;
        this.Query.type = val.id;
        this.istypeShow = false;
      },
      canceltypeClick() {
        this.istypeShow = false;
      },
      // 统计类型
      statistiClick() {
        this.isstatisticaltypeShow = true;
      },
      confirmstatistiClick(val, index) {
        this.statistiVal = val.name;
        this.titleFun({
          title: this.statistiVal
        });
        this.isstatisticaltypeShow = false;
      },
      cancelstatistiClick() {
        this.isstatisticaltypeShow = false;
      },
      echartsClick(i) {
        let self = this;
        self.isechartsnavboxitemSelect = i;
        self.carFun(i);
      },
      carFun(i) {
        let self = this;
        if (i == 0) {
          self.$nextTick(function () {
            self.pieMapListsFun();
          });
        } else if (i == 1) {
          self.$nextTick(function () {
            self.categoryMapListsFun();
          });
        } else if (i == 2) {
          self.$nextTick(function () {
            self.zhexianMapListsFun();
          });
        }
      },
      searchClick() {
        let self = this;
        if (self.statistiVal == "年龄统计") {
          self.listAgeFun();
        } else if (self.statistiVal == "职业统计") {
          self.listZyFun();
        } else if (self.statistiVal == "文化程度统计") {
          self.listWhFun();
        } else if (self.statistiVal == "民族统计") {
          self.listMzFun();
        } else if (self.statistiVal == "性别统计") {
          self.listXbFun();
        }
      },
      mapDataFun(arr, data) {
        let self = this;
        self.pieDataList = arr;
        console.log(self.pieDataList)

        self.categoryColorLists = self.pieDataList.map(e => {
          return e.color;
        });
        if (data) {
          self.pieDataList.forEach(e => {
            for (let k in data) {
              if (e.id == k) {
                e.value = data[k];
              }
            }
          });
        }
        self.XLists = self.pieDataList.map(e => {
          return e.name;
        });
        self.YLists = self.pieDataList.map(e => {
          return e.value;
        });
        self.bottomLists = self.pieDataList.map(e => {
          let obj = {
            ...e,
            percentum: 0
          }
          return obj;
        });
        self.carFun(self.isechartsnavboxitemSelect);
      },
      async listAgeFun() {
        let self = this;
        let params = {
          ...self.Query
        };
        delete params.streetStr;
        delete params.communityStr;
        delete params.gridStr;
        let res = await taskApi.GetApistatisticsagestatistics(params);
        if (res.statusCode == 200) {
          let data = res.data;
          let arr = [{
              name: "18岁以下",
              value: "0",
              id: "0",
              color: "#DFB885"
            },
            {
              name: "18-35岁",
              value: "0",
              id: "1",
              color: "#88CFC7"
            },
            {
              name: "36-45岁",
              value: "0",
              id: "2",
              color: "#DF87CF"
            },
            {
              name: "46-59岁",
              value: "0",
              id: "3",
              color: "#EF8484"
            },
            {
              name: "60岁以上",
              value: "0",
              id: "4",
              color: "#9DCB96"
            }
          ];
          this.mapDataFun(arr, data);
        } else {
          let data = res.data;
          let arr = [{
              name: "18岁以下",
              value: "0",
              id: "0",
              color: "#DFB885"
            },
            {
              name: "18-35岁",
              value: "0",
              id: "1",
              color: "#88CFC7"
            },
            {
              name: "36-45岁",
              value: "0",
              id: "2",
              color: "#DF87CF"
            },
            {
              name: "46-59岁",
              value: "0",
              id: "3",
              color: "#EF8484"
            },
            {
              name: "60岁以上",
              value: "0",
              id: "4",
              color: "#9DCB96"
            }
          ];
          this.mapDataFun(arr, data);
          Toast({
            message: res.statusMessage,
            position: "bottom"
          });
        }
      },
      async listZyFun() {
        let self = this;
        let params = {
          ...self.Query
        };
        delete params.streetStr;
        delete params.communityStr;
        delete params.gridStr;
        let res = await taskApi.GetApistatisticscareerstatistics(params);
        if (res.statusCode == 200) {
          let arr = [{
              name: "工人",
              id: "0",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "农牧渔民",
              id: "1",
              value: 0,
              color: "#88CFC7"
            },
            {
              name: "专业技术人员",
              id: "2",
              value: 0,
              color: "#DF87CF"
            },
            {
              name: "学校教职工",
              id: "3",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "企事业单位人员",
              id: "4",
              value: 0,
              color: "#EF8484"
            },
            {
              name: "党政机关工作人员",
              id: "5",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "学生",
              id: "6",
              value: 0,
              color: "#9DCB96"
            },
            {
              name: "离退休人员",
              id: "7",
              value: 0,
              color: "#957B96"
            },
            {
              name: "职业",
              id: "8",
              value: 0,
              color: "#88CFC7"
            },
            {
              name: "其他",
              id: "9",
              value: 0,
              color: "#DFB885"
            }
          ];
          let data = res.data;
          this.mapDataFun(arr, data);
        } else {
          let arr = [{
              name: "工人",
              id: "0",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "农牧渔民",
              id: "1",
              value: 0,
              color: "#88CFC7"
            },
            {
              name: "专业技术人员",
              id: "2",
              value: 0,
              color: "#DF87CF"
            },
            {
              name: "学校教职工",
              id: "3",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "企事业单位人员",
              id: "4",
              value: 0,
              color: "#EF8484"
            },
            {
              name: "党政机关工作人员",
              id: "5",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "学生",
              id: "6",
              value: 0,
              color: "#9DCB96"
            },
            {
              name: "离退休人员",
              id: "7",
              value: 0,
              color: "#957B96"
            },
            {
              name: "职业",
              id: "8",
              value: 0,
              color: "#88CFC7"
            },
            {
              name: "其他",
              id: "9",
              value: 0,
              color: "#DFB885"
            }
          ];
          this.mapDataFun(arr);
          Toast({
            message: res.statusMessage,
            position: "bottom"
          });
        }
      },
      async listWhFun() {
        let self = this;
        let params = {
          ...self.Query
        };
        delete params.streetStr;
        delete params.communityStr;
        delete params.gridStr;
        let res = await taskApi.GetApistatisticseducationallevelstatistics(
          params
        );
        if (res.statusCode == 200) {
          let arr = [{
              name: "初中及以下",
              id: "0",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "高中",
              id: "1",
              value: 0,
              color: "#88CFC7"
            },
            {
              name: "中专",
              id: "2",
              value: 0,
              color: "#DF87CF"
            },
            {
              name: "大专",
              id: "3",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "本科",
              id: "4",
              value: 0,
              color: "#EF8484"
            },
            {
              name: "研究生及以上",
              id: "5",
              value: 0,
              color: "#DFB885"
            }
          ];
          let data = res.data;
          this.mapDataFun(arr, data);
        } else {
          let arr = [{
              name: "初中及以下",
              id: "0",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "高中",
              id: "1",
              value: 0,
              color: "#88CFC7"
            },
            {
              name: "中专",
              id: "2",
              value: 0,
              color: "#DF87CF"
            },
            {
              name: "大专",
              id: "3",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "本科",
              id: "4",
              value: 0,
              color: "#EF8484"
            },
            {
              name: "研究生及以上",
              id: "5",
              value: 0,
              color: "#DFB885"
            }
          ];
          let data = res.data;
          this.mapDataFun(arr, data);
          Toast({
            message: res.statusMessage,
            position: "bottom"
          });
        }
      },
      async listMzFun() {
        let self = this;
        let params = {
          ...self.Query
        };
        delete params.streetStr;
        delete params.communityStr;
        delete params.gridStr;
        let res = await taskApi.GetApistatisticsethnicstatistics(params);
        if (res.statusCode == 200) {
          let arr = [{
              name: "汉族",
              id: "0",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "少数民族",
              id: "1",
              value: 0,
              color: "#88CFC7"
            }
          ];
          let data = res.data;
          this.mapDataFun(arr, data);
        } else {
          let arr = [{
              name: "汉族",
              id: "0",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "少数民族",
              id: "1",
              value: 0,
              color: "#88CFC7"
            }
          ];
          let data = res.data;
          this.mapDataFun(arr, data);
          Toast({
            message: res.statusMessage,
            position: "bottom"
          });
        }
      },
      async listXbFun() {
        let self = this;
        let params = {
          ...self.Query
        };
        delete params.streetStr;
        delete params.communityStr;
        delete params.gridStr;
        let res = await taskApi.GetApistatisticssexstatistics(params);
        if (res.statusCode == 200) {
          let arr = [{
              name: "男",
              id: "0",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "女",
              id: "1",
              value: 0,
              color: "#88CFC7"
            }
          ];
          let data = res.data;
          this.mapDataFun(arr, data);
        } else {
          let arr = [{
              name: "男",
              id: "0",
              value: 0,
              color: "#DFB885"
            },
            {
              name: "女",
              id: "1",
              value: 0,
              color: "#88CFC7"
            }
          ];
          let data = res.data;
          this.mapDataFun(arr, data);
          Toast({
            message: res.statusMessage,
            position: "bottom"
          });
        }
      },
      zhexianMapListsFun() {
        let self = this;
        let eComVisitChart = echarts.init(
          document.getElementById("zhexianMainmap")
        );
        eComVisitChart.setOption({
          xAxis: {
            name: "(年龄)",
            type: "category",
            data: self.XLists,
            axisLabel: {
              interval: 0,
              rotate: -30
            },
            nameTextStyle: {
              color: "#fff"
            }
          },
          yAxis: {
            name: "(人数)",
            type: "value"
          },
          series: [{
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            itemStyle: {
              normal: {
                color: "red",
                //以下为是否显示
                label: {
                  show: false
                }
              }
            },
            silent: true,
            data: self.YLists,
            type: "line"
          }]
        });
      },
      categoryMapListsFun() {
        let self = this;
        let eComVisitChart = echarts.init(
          document.getElementById("categoryMainmap")
        );
        eComVisitChart.setOption({
          xAxis: {
            name: "(年龄)",
            type: "category",
            data: self.XLists,
            axisLabel: {
              interval: 0,
              rotate: -30
            },
            nameTextStyle: {
              color: "#fff"
            }
          },
          yAxis: {
            name: "(人数)",
            type: "value"
          },

          series: [{
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return self.categoryColorLists[params.dataIndex];
                },
                //以下为是否显示
                label: {
                  show: false
                }
              }
            },
            silent: true,
            data: self.YLists,
            type: "bar",
            barWidth: 15 //柱图宽度
          }]
        });
      },
      pieMapListsFun() {
        let self = this;
        let eComVisitChart = echarts.init(document.getElementById("pieMainmap"));
        eComVisitChart.setOption({
          series: [{
            silent: true,
            type: "pie",
            radius: 120,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "inner",
                textStyle: {
                  fontWeight: 100,
                  fontSize: 12
                },
                formatter: "{b} {d}%"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            color: self.categoryColorLists,
            data: self.pieDataList
          }]
        });
      }
    },
    filters: {},
    watch: {},
    computed: {}
  };

</script>
<style scoped>
  .echarts_nav_box_itemSelect {
    background-color: #e74d48;
    color: #fff !important;
  }

  .echarts_nav_box_item {
    width: 33.333333%;
    height: 1.0667rem;
    text-align: center;
    line-height: 1.0667rem;
    font-size: 0.3467rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(137, 137, 137, 1);
  }

  .echarts_nav {
    width: 100%;
    margin-bottom: 0.8rem;
    margin-top: 0.2667rem;
    height: 1.0667rem;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  .echarts_nav_box {
    width: 7.4133rem;
    height: 1.0667rem;
    background: rgba(255, 255, 255, 1);
    border: 0.0267rem solid rgba(192, 192, 192, 1);
    border-radius: 0.5333rem;
    overflow: hidden;
  }

  /* 筛选 */
  .search_button {
    width: 2.5067rem;
    height: 0.9333rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.0533rem;
    font-size: 0.4rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(224, 38, 43, 1);
    line-height: 0.9333rem;
    text-align: center;
    margin-top: 0.72rem;
  }

  .search_buxBox {
    height: 0.96rem;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .search_item_lf {
    width: 1.6533rem;
    height: 1.0667rem;
    line-height: 1.0667rem;
    font-size: 0.3467rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    text-align: center;
  }

  .search_item_lc {
    height: 1.0667rem;
    line-height: 1.0667rem;
    width: calc(100% - 1.6533rem - 0.9333rem - 0.2667rem);
    font-size: 0.4rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }

  .search_item_lr {
    width: 0.9333rem;
    height: 1.0667rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search_item_lr i {
    font-size: 0.32rem;
    color: #fff;
  }

  .search_item {
    width: calc(100% - 1.0667rem);
    margin-left: 0.5333rem;
    height: 1.0667rem;
    background: rgba(236, 242, 245, 0.28);
    border-radius: 0.0533rem;
    margin-top: 0.4rem;
  }

  .box_title {
    width: 100%;
    min-height: 11.7333rem;
    overflow: hidden;
    background: linear-gradient(-40deg,
      rgba(232, 61, 67, 1),
      rgba(228, 27, 36, 1));
  }

  /* 筛选 */
  .echarts_title {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(163, 163, 163, 1);
  }

  .box_main_list_item_type {
    width: 0.3467rem;
    height: 0.3467rem;
    background: rgba(223, 184, 133, 1);
    margin-top: 0.08rem;
    margin-right: 0.32rem;
  }

  .box_main_list_item_txt {
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(82, 99, 111, 1);
  }

  .box_main_list_item {
    width: 100%;
    height: 0.4rem;
    margin-left: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(82, 99, 111, 1);
    margin-top: 0.4267rem;
  }

  .box_main_listUl {
    display: flex;
    flex-wrap: wrap;
  }

  .box_main_list {
    min-height: 1.2rem;
    width: 100%;
    margin-top: 0.1333rem;
    margin-bottom: 1.2rem;
    overflow: hidden;
  }

  /* 图表 */
  .echarts_main {
    height: 400px;
    width: calc(100% - 0.8rem);
    margin-left: 0.4rem;
    overflow: hidden;
  }

  .box_main_echarts {
    width: 100%;
    height: 480px;
    overflow: hidden;
    position: relative;
  }

  /* 图表 */
  .box_main_bd_box_list_itemP {}

  .box_main_bd_box_list_itemV {
    margin-right: 0.1333rem;
  }

  .box_main_bd_box_list_itemN {
    margin-right: 0.1333rem;
  }

  .box_main_bd_box_list_itemC {
    width: 0.2667rem;
    height: 0.2667rem;
    margin-right: 0.1333rem;
  }

  .box_main_bd_box_list_item {
    height: 0.5333rem;
    width: 100%;
    padding: 0.2133rem;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .box_main_bd_box_list {
    min-height: 150px;
    width: calc(100% - 0.5333rem);
    background-color: #fff;
    margin-left: 0.2667rem;
    margin-bottom: 0.6667rem;
  }

  .box_main_bd_box {
    width: calc(100% - 0.5333rem);
    margin-left: 0.2667rem;
    background-color: #fff;
    overflow: hidden;
    min-height: 335px;
  }

  .box_main_bd {
    width: 100%;
    min-height: 435px;
    background: rgba(255, 255, 255, 1);
    overflow: hidden;
    background: url("/static/img/党员数据.jpg") no-repeat;
    background-size: 100% auto;

  }

  .box {
    background: #f6f6f6;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
  }

  #pieMainmap {
    width: 100%;
    height: 260px;
    overflow: hidden;
    z-index: 10001;
  }

  #categoryMainmap {
    width: 100%;
    height: 260px !important;
    overflow: hidden;
  }

  #zhexianMainmap {
    width: 100%;
    height: 260px;
    overflow: hidden;

  }

</style>
